/**
 * Created by xlt on 2017/6/7.
 */
import React, {Component, PropTypes} from "react";
import {connect} from "react-redux";
import ReactDOM from "react-dom";
import {Color} from "../../utils/baseColor";
import {fetchPosts, reset} from "../../actions";
import ChooseStore from "../../components/ChooseStore";
import {Constant} from "../../utils/BaseConstant";
import cookie from "react-cookie";

class addEmployee extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            staffType: -1,
            bgColor: "#f6a623",
            shopList: [],
            shopName: '',
            shopNo: "",
            display: "none"
        }
    }

    componentWillMount() {
        document.body.style.background = Color.BACKGROUND_COLOR;
        document.title = "添加员工";
    }

    componentDidMount() {
        const query = this.props.location.query;
        if (query.staffType) {
            this.setState({staffType: query.staffType});
        }
        this.setState({shopNo: query.shopNo});
        if (cookie.load("userRight") == Constant.BOSS) {
            this.setState({display: ""});
        }
        const header = {"X-Client-ID": "123456"};
        this.props.dispatch(reset("addEmployee"));
        this.props.dispatch(reset("getShopListByOpenId"));
        this.props.dispatch(fetchPosts("getShopListByOpenId", header, {openId: cookie.load("openId")}));
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.GetShopListByOpenId.errorCode == 0) {
            let shopList = nextProps.GetShopListByOpenId.data.shopInfoForStaffVos;
            this.setState({
                shopList: shopList
            });
        }
        if (nextProps.AddEmployee.errorCode == 0) {
            window.location.href = "/#/pay/quickResponseCode?qrCode=" + nextProps.AddEmployee.data + "&qrCodeType=1&shopNo=" + this.state.shopNo + "&staffType=" + this.state.staffType;
        } else if (nextProps.AddEmployee.errorCode == -1) {
            alert("该手机号码已添加过，请检查手机号码是否正确!");
        }
    }


    addEmployee() {
        let name = ReactDOM.findDOMNode(this.refs.employeeName).value;
        let phone = ReactDOM.findDOMNode(this.refs.phone).value;
        if (name == '') {
            alert("名字不能为空！");
            return;
        }
        if (phone == '') {
            alert("电话号码不能为空！");
            return;
        }
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
            alert("手机号码有误，请重填");
            return;
        }
        if (this.state.staffType == -1) {
            alert("请选择员工类型！");
            return;
        }
        const header = {"X-Client-ID": "123456"};
        this.props.dispatch(reset("addEmployee"));
        this.props.dispatch(reset("getShopListByOpenId"));
        this.props.dispatch(fetchPosts("addEmployee", header, {
            shopNo: this.state.shopNo,
            userAccount: phone,
            userName: name,
            userType: this.state.staffType
        }));
        this.setState({bgColor: "#9e9e9e"});
    }

    chooseStoreName() {
        if (this.state.shopList.length > 1) {
            return (
                <div className="store-verification">
                    <p className="store-verification-p">店铺：</p>
                    <div className="store-name">
                        <ul>
                            {
                                this.state.shopList.map((item, index) => {
                                    return (
                                        <ChooseStore item={item}
                                                     selectShopNo={this.state.shopNo}
                                                     key={index} index={index}
                                                     shoppingNameChangeColor={this.shoppingNameChangeColor.bind(this, item.shopNo)}
                                        />
                                    );
                                })
                            }
                        </ul>
                    </div>
                </div>
            )
        }
    }

    chooseEmployeeType(employeeType) {
        this.setState({staffType: employeeType});
    }

    displayAdmin() {
        let userRight = cookie.load("userRight");
        if (Constant.BOSS == userRight) {
            return (
                <span>
                    <div>管理员权限：</div>
                    <div>1.管理员工 2.店铺收款二维码 3.查看、导出交易流水记录 4.通知提示每笔收款到账</div>
               </span>
            )
        }
    }

    render() {
        if (this.state.loading) {
            return (<div className="loading"><span>loading</span></div>)
        } else {
            let className1 = (Constant.CASHIER == this.state.staffType) ? "curr" : "";
            let className2 = (Constant.ACCOUNTANT == this.state.staffType) ? "curr" : "";
            let className3 = (Constant.ADMIN == this.state.staffType) ? "curr" : "";
            return (
                <div>
                    <div className="login-text">
                        <div className="login-two-rows">
                            {this.chooseStoreName()}
                        </div>
                        <div className="employee-bottom-rows">
                            <div className="add-employee-choose-employeeType">
                                <div>员工类型：</div>
                                <div className="add-employeeType">
                                    <ul>
                                        <li className={className1}
                                            onClick={this.chooseEmployeeType.bind(this, Constant.CASHIER)}>收银员
                                        </li>
                                        <li className={className2}
                                            onClick={this.chooseEmployeeType.bind(this, Constant.ACCOUNTANT)}>财务
                                        </li>
                                        <li className={className3}
                                            onClick={this.chooseEmployeeType.bind(this, Constant.ADMIN)}
                                            style={{display: this.state.display}}>管理员
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div className="login-two-rows">
                            <div className="phone-number-verification-two">
                                <div>姓名：</div>
                                <input type="text" className="text-border-display"
                                       onFocus={this.onFocusAddEmployee.bind(this)}
                                       name="employeeName" ref="employeeName"
                                />
                                {/*<div className="delete-img-name"*/}
                                {/*onClick={this.deleteName.bind(this)}*/}
                                {/*style={{display: this.state.deleteNameDisplay}}>*/}
                                {/*</div>*/}
                            </div>
                        </div>
                        <div className="login-two-rows">
                            <div className="phone-number-verification-two">
                                <div>手机：</div>
                                <input type="text" className="text-border-display"
                                       name="phone" ref="phone"
                                       onFocus={this.onFocusAddEmployee.bind(this)}
                                       maxLength="11"
                                />
                                {/*<div className="delete-img"*/}
                                {/*ref="deletePhone" name="deletePhone"*/}
                                {/*onClick={this.deletePhoneNum.bind(this)}*/}
                                {/*style={{display: this.state.deleteDisplay}}>*/}
                                {/*</div>*/}
                            </div>
                        </div>
                    </div>
                    <div className="add-employee-btn-div">
                        <button className="add-employee-btn"
                                onClick={this.addEmployee.bind(this)}
                                style={{background: this.state.bgColor}}>
                            添加
                        </button>
                    </div>
                    <div className="management-staff-bottom">
                        <div>
                            <div className="management-staff-bottom-img"></div>
                        </div>
                        <div>
                            <div>收银员权限：</div>
                            <div>1.店铺收款二维码 2.查看每天交易额，交易流水记录 3.通知提示每笔收款到账</div>
                            {this.displayAdmin()}
                            <div>财务权限：</div>
                            <div>1.查询交易清单 2.导出交易清单</div>
                        </div>
                    </div>
                </div>
            )
        }
    }


    onFocusAddEmployee() {
        this.setState({bgColor: "#f6a623"});
    }

    // deletePhoneNum() {
    //     ReactDOM.findDOMNode(this.refs.phone).value = "";
    //     this.setState({deleteDisplay: "none"});
    //     this.setState({click: true});
    // }
    // deleteName(){
    //     ReactDOM.findDOMNode(this.refs.employeeName).value = "";
    //     this.setState({deleteNameDisplay: "none"});
    //     this.setState({click: true});
    // }
    // onBlurText() {
    //     if(this.state.click) {
    //         this.setState({deleteDisplay: "none"});
    //     }
    // }
    //
    // onNameChange() {
    //     let employeeName = ReactDOM.findDOMNode(this.refs.employeeName).value;
    //     if (employeeName.length > 0) {
    //         this.setState({deleteNameDisplay: ""});
    //         this.setState({click: false});
    //     } else {
    //         this.setState({deleteNameDisplay: "none"});
    //     }
    // }
    //
    // onPhoneChange() {
    //     let phoneNum = ReactDOM.findDOMNode(this.refs.phone).value;
    //     if (phoneNum.length > 0) {
    //         this.setState({deleteDisplay: ""});
    //         this.setState({click: false});
    //     } else {
    //         this.setState({deleteDisplay: "none"});
    //     }
    // }

    shoppingNameChangeColor(shopNo) {
        this.setState({
            shopNo: shopNo
        });
    }
}

function mapStateToProps(state) {
    const {postsByApi} = state;
    const {
        isFetching,
        items: AddEmployee
    } = postsByApi["addEmployee"] || {
        isFetching: false,
        items: {}
    };
    const {
        items: GetShopListByOpenId
    } = postsByApi["getShopListByOpenId"] || {
        items: {}
    };
    return {
        AddEmployee,
        GetShopListByOpenId,
        isFetching
    }
}

addEmployee.propTypes = {
    isFetching: PropTypes.bool.isRequired,
    dispatch: PropTypes.func.isRequired
};
addEmployee.contextTypes = {
    router: React.PropTypes.object
};

export default connect(mapStateToProps)(addEmployee);

